<template>
  <div v-if="visible">
    御剑乘风来,除魔天地间!<br>
    <button @click="canleHandler">取消</button>
    <button>确认</button>
  </div>

</template>
<script>
export default {
  name: '',
  // 父向子传值，子接收数据
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {

    }
  },
  methods: {
    canleHandler() {
      // 子向父传值
      // this.$emit('canle')

      // sync 修饰符语法,修改属性值
      this.$emit('update:visible', false)
    }
  }

}
</script>
<style lang='scss'  scoped>

</style>
